<template>
  <div id="index" class="page">
      <div v-if="selectList.length > 0 && hotList.length > 0" class="item">
          <div class="musicList" >
            <p class="text">精选歌单</p>
            <div class="content">
              <div class="left musicItem">
                <div class="image" style="width:300px;height:300px; border:1px solid gray;">
                  <a href="javaScript:void(0)" @click="toDetails(selectList[0])">
                    <img :src="selectList[0].picUrl" :title="selectList[0].name" width="100%" height="100%">
                  </a>
                  <span class="mark">播放量：{{selectList[0].playCount}}</span>
                </div>
                <p style="text-align: left;">{{selectList[0].name}}</p>
              </div>

              <div class="right">
                <div v-for="(element,index) in selectList" :key="index" v-if="index != 0" class="sub_item musicItem">
                  <div class="image" style="width:120px;height:120px;">
                    <a href="javaScript:void(0)" @click="toDetails(element)">
                      <img :src="element.picUrl" :title="element.name" width="100%" height="100%">
                    </a>
                    <span class="mark">{{element.playCount}}</span>
                  </div>
                  <p style="width:120px" class="desc">{{element.name}}</p>
                </div>
              </div>
            </div>
          </div>
          <div id="hotList">
            <p class="text">热门榜单</p>
            <div v-for="(element,index) in hotList" :key="index" class="content" v-if="index < 3">
                <div>
                  <img :src="element.coverImgUrl" :title="element.description" width="120px" height="120px">
                </div>
                <div>
                  <ul>
                    <li v-for="(ele,ind) in element.tracks" :key="ind" @click="hotTopAddPlayList(ele)">
                      <a href="javascript:void(0)" class="desc">{{ele.first}} - {{ele.second}}</a>
                    </li>
                  </ul>
                </div>
            </div>
          </div>
      </div>
      <div v-if="newMusic.length >0 && mv.length > 0" class="item">
        <div class="musicList">
          <p class="text">新歌首发
            <span class="language" v-for="(elemet,index) in language" :key="index">
                <a href="javascript:void(0)">{{elemet.name}}</a>
            </span>
          </p>
          <div id="newMusic">
              <div class="content" v-for="(element,index) in newMusic" :key="index" v-if="index < 10">
                  <div style="width: 240px;" class="content">
                    <div style="width:50px; height: 50px; border:1px solid gainsboro;" class="image">
                      <img :src="element.album.blurPicUrl" :title="element.name" width="100%" height="100%">
                    </div>
                    <div style="margin-left:10px;">
                      <p class="musicName"><a href="" >{{element.name}}</a></p>
                      <p><a href="">{{element.artists[0].name}}</a></p>
                    </div>
                  </div>
                  <div>
                    <span class="palyButton" @click="newMusicAddPlayList(element)">
                        <a href="javascript:void(0);" >
                          <i class="el-icon-caret-right"></i>
                        </a>
                    </span>
                  </div>
              </div>
          </div>
        </div>

        <div class="right">
          <p class="text">推荐MV</p>
          <div class="mv" style="width:400px;height:280px;">
            <a href="javascript:void(0)">
              <img :src="mv[0].cover" :title="mv[0].name" width="100%" height="230px;">
            </a>
            <div>
              <p><a href="">{{mv[0].name}}</a></p>
              <p><a href="">{{mv[0].artists[0].name}}</a></p>
            </div>
          </div>
          <div style="display: flex;" class="mv">
              <div v-for="(element,index) in mv" :key="index" v-if="index > 0">
                <div>
                  <a href="">
                    <img :src="element.cover" :title="element.name" width="200px" height="100px">
                  </a>
                </div>
                <div>
                  <p><a href="">{{element.name}}</a></p>
                  <p><a href="">{{element.artists[0].name}}</a></p>
                </div>
              </div>
          </div>
        </div>
      </div>
      <div v-if="hotRadio.length > 0" class="item">
        <div id="redio">
          <p class="text">热门电台</p>
          <div class="content">
            <div v-for="(element,index) in hotRadio" :key="index" style="margin-right: 20px;">
              <a href="">
                <div style="width:150px; height: 150px;">
                  <img :src="element.picUrl" :title="element.rcmdtext" width="100%" height="100%">
                </div>
                <span style="display:inline-block;width:150px;">{{element.name}}</span>
              </a>
            </div>
          </div>
        </div>

      </div>
      <div v-if="auther.length > 0" class="item">
          <div id="auther">
            <p class="text">热门歌手
                  <span class="language" v-for="(elemet,index) in language" :key="index">
                    <a href="javascript:void(0)">{{elemet.name}}</a>
                </span>
            </p>
            <div class="content">
              <div v-for="(element,index) in auther" :key="index" style="margin-right:20px;">
                <a href="">
                  <div style="width:150px; height: 150px;">
                    <img :src="element.img1v1Url" :title="element.alias[0]" width="100%" height="100%">
                  </div>
                  <span>{{element.name}}</span>
                </a>
              </div>
            </div>

          </div>
      </div>
  </div>
</template>

<script>
import functions from "../utils/functions";
import StorageUtil from "../utils/StorageUtil";

export default {
  name: "index",
  data(){
    return{
      selectList:[],
      hotList:[],
      language:[
        {type:7,name:'华语'},
        {type:96,name:'欧美'},
        {type:8,name:'日本'},
        {type:16,name:'韩国'}
      ],
      newMusic:[],
      mv:[],
      hotRadio:[],
      auther:[],
    }
  },
  methods:{
    searchNewMusic(index){ // 得到新歌首发列表
        this.$get("https://autumnfish.cn/top/song?type=" + index).then(result => {
            this.newMusic = result.data;
        });
    },
    getHotAuther(index){ //得到热门歌手列表
      this.$get("https://autumnfish.cn/top/artists?limit=6&type=" + index).then(result => {
        this.auther = result.artists;
      })
    },
    getSelectMusicList(){ //得到精选歌单列表
      this.$get("https://autumnfish.cn/personalized?limit=5").then(result => {
        this.selectList = result.result;
      });
    },
    getHostTopList(){ // 得到热门榜单列表
      this.$get("https://autumnfish.cn/toplist/detail").then(result => {
        this.hotList = result.list;
      });
    },
    getRecommandMvList(){ // 得到推荐MV列表
      this.$get("https://autumnfish.cn/mv/first?limit=3").then(result => {
        this.mv = result.data;
      });
    },
    getDJRedioList(){ // 得到热门电台列表
      this.$get("https://autumnfish.cn/dj/hot?limit=6").then(result => {
        this.hotRadio = result.djRadios;
      });
    },
    hotTopAddPlayList(item){
        this.$get("https://autumnfish.cn/search?limit=1&keywords="+item.first + ' ' + item.second).then(result=>{
          let data = {
            singName:item.first,
            singerName:item.second,
            singId:result.result.songs[0].id
          };
          functions.savePlayList(data);
          this.$router.push({path:'/play'});
        })

    },
    newMusicAddPlayList(item){
        functions.addPlayList(item);
        this.$router.push({path:'/play'});
    },
    toDetails(item){
      StorageUtil.session.setItem("singDetails",item);
      this.$router.push({ path:'/singleList' });
    }
  },
  created() {
      this.getSelectMusicList();
      this.getHostTopList();
      this.searchNewMusic(7);
      this.getRecommandMvList();
      this.getDJRedioList();
      this.getHotAuther(7);
  }
}
</script>

<style scoped>
@import "../static/index.css";
</style>
